<template>
    <div>
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <a href="/index.html">首页</a> &gt;
                <a href="/cart.html">购物车</a>
            </div>
        </div>

        <div class="section">
            <div class="wrapper">
                <div class="bg-wrap">
                    <!--购物车头部-->
                    <div class="cart-head clearfix">
                        <h2>
                            <i class="iconfont icon-cart"></i>我的购物车</h2>
                        <div class="cart-setp">
                            <ul>
                                <li class="first active">
                                    <div class="progress">
                                        <span>1</span>
                                        放进购物车
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span>2</span>
                                        填写订单信息
                                    </div>
                                </li>
                                <li class="last">
                                    <div class="progress">
                                        <span>3</span>
                                        支付/确认订单
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--购物车头部-->
                    <!--商品列表-->
                    <div class="cart-box">
                        <input id="jsondata" name="jsondata" type="hidden">
                        <table width="100%" align="center" class="cart-table" border="0" cellspacing="0" cellpadding="8">
                            <tbody>
                                <tr>
                                    <th width="48" align="center">
                                        <a>选择</a>
                                    </th>
                                    <th align="left" colspan="2">商品信息</th>
                                    <th width="84" align="left">单价</th>
                                    <th width="104" align="center">数量</th>
                                    <th width="104" align="left">金额(元)</th>
                                    <th width="54" align="center">操作</th>
                                </tr>

                                <tr v-for="(item,index) in goodsList" :key="item.id">
                                    <td>
                                        <el-switch v-model="item.isSelected" active-color="#0094ff" inactive-color="#333333">
                                        </el-switch>
                                    </td>
                                    <td align="left" colspan="2">
                                        <div style="display:flex;align-items:center">
                                            <img width="50" height="50" :src="item.img_url" alt="">&nbsp;&nbsp;
                                            <span>{{item.title}}</span>
                                        </div>
                                    </td>
                                    <td align="left">
                                        {{item.sell_price}}
                                    </td>
                                    <td align="center">
                                        <inputnumber @numberChange="getChangeNumber" :initCount="item.buycount" :goodsId="item.id"></inputnumber>

                                    </td>
                                    <td align="left">
                                        {{item.sell_price * item.buycount}}
                                    </td>
                                    <td align="center">
                                        <a href="javascript:void(0)" @click="deleteGoods(item.id,index)">删 除</a>
                                    </td>
                                </tr>

                                <tr v-if="goodsList.length <= 0">
                                    <td colspan="10">
                                        <div class="msg-tips">
                                            <div class="icon warning">
                                                <i class="iconfont icon-tip"></i>
                                            </div>
                                            <div class="info">
                                                <strong>购物车没有商品！</strong>
                                                <p>您的购物车为空，
                                                    <a href="/index.html">马上去购物</a>吧！</p>
                                            </div>
                                        </div>                                      
                                    </td>
                                </tr>


                                <tr>
                                    <th align="right" colspan="8">
                                        已选择商品
                                        <b class="red" id="totalQuantity">{{getTotalCount}}</b> 件 &nbsp;&nbsp;&nbsp; 商品总金额（不含运费）：
                                        <span class="red">￥</span>
                                        <b class="red" id="totalAmount">{{getTotalPrice}}</b>元
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--/商品列表-->
                    <!--购物车底部-->
                    <div class="cart-foot clearfix">
                        <div class="right-box">
                            <button class="button" @click="gobuy">继续购物</button>
                            <button class="submit" @click="goToOrder">立即结算</button>
                        </div>
                    </div>
                    <!--购物车底部-->
                </div>
            </div>
        </div>
    </div>
</template>

<style>

</style>

<script>
import inputnumber from "../subcomponents/inputnumber.vue";
import { getLocalGoods } from "../../common/localStorageTool";

export default {
  data() {
    return {
      goodsList: []
    };
  },
  computed: {
    getTotalCount() {
      let totalCount = 0;
      this.goodsList.forEach(item => {
        if (item.isSelected) {
          totalCount += item.buycount;
        }
      });
      return totalCount;
    },
    getTotalPrice() {
      let totalPrice = 0;
      this.goodsList.forEach(item => {
        if (item.isSelected) {
          totalPrice += item.buycount * item.sell_price;
        }
      });
      return totalPrice;
    }
  },
  components: {
    inputnumber
  },
  created() {
    this.getGoodsListData();
  },
  methods: {
    getGoodsListData() {
      //1. 获取本地仓库里面的数据
      const localObj = getLocalGoods();
      console.log(localObj);
      //2. 声明一个数组 , 将每一个key ,也就是id 放进这个数组
      let tempArray = [];
      for (const key in localObj) {
        tempArray.push(key);
        console.log(key);
      }

      if (tempArray.length <= 0) return;
      //将数组里面的值用  ',' 号分隔开,传入url 链接 , 发送至服务器获取数据
      const url = `site/comment/getshopcargoods/${tempArray.join(",")}`;

      this.$axios.get(url).then(response => {
        console.log(response);
        response.data.message.forEach(item => {
          item.buycount = localObj[item.id];
          item.isSelected = true;
        });
        this.goodsList = response.data.message;
      });
    },
    //@numberChange="getChangeNumber" 从子组件传过来的自定义函数名 后面接的参数作为父组件的函数名
    getChangeNumber(changedGoods) {
      //怎么拿到子组件传过来的对象
      //通过传参
      //改变子组件的值以后,值传给了父组件
      //父组件接受子组件的值, 再赋值给自己
      console.log(changedGoods);
      this.goodsList.forEach(item => {
        if (changedGoods.goodsId == item.id) {
          item.buycount = changedGoods.count;
        }
      });
      //调用vuex的方法
      this.$store.commit("updateGoods", changedGoods);
    },
    deleteGoods(goodsId, index) {
    //   console.log(goodsId, index);
      this.$confirm("是否删除该商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
            //根据goodsId 删除localStorage中的数据
            this.$store.commit('deleteGoodsById',goodsId)
            //删除goodsList中的数据
            this.goodsList.splice(index,1)
        }).catch(() => {

        });
    },
    //编程时导航, 跳转到继续购物
    gobuy(){
        //1.不带参数  path
        // this.$router.push({path:'/site/goodslist'})

        //2.不带参数  name 这种方式需要在main.js中额添加一个name
        this.$router.push({name:'goodslist'})
    },
    goToOrder(){
        const ids = []
        this.goodsList.forEach(item =>{
            if(item.isSelected){
                ids.push(item.id)
            }
        })

        if(ids.length <=0){
            this.$message.error('请至少选择一个商品进行结算!')
            return
        }
        console.log(ids);
        //3.带参数路径  第三种  对象包裹 , 用 this.$route.query.xxx 取值
        this.$router.push(`/site/order/${ids.join(',')}`)
        // this.$router.push({path:'/site/order',query:{xxx:'111'}})
        // 用 this.$route.query.xxx 取值

        //4.带参数路径  第四种  斜杠分隔传值 用 this.$route.params.xxx 取值
        // this.$router.push(`/site/order/111/222`)
    }
  }
};
</script>
